<template>
  <div class="lottery-container">
    <!-- 背景音乐 -->
    <audio ref="bgMusic" loop>
      <source src="/music/lottery.mp3" type="audio/mpeg">
      您的浏览器不支持音频元素
    </audio>
    <div class="lottery-board">
      <!-- 第一行 -->
      <div 
        v-for="index in 5" 
        :key="'top-' + index" 
        :class="['lottery-cell', { 'active': currentIndex === index }]"
      >
        {{ getPositionIndex(index) }}
      </div>
      
      <!-- 右侧 -->
      <div 
        v-for="index in 3" 
        :key="'right-' + index" 
        :class="['lottery-cell', { 'active': currentIndex === (index + 5) }]"
      >
        {{ getPositionIndex(index + 5) }}
      </div>
      
      <!-- 底部（从右到左） -->
      <div 
        v-for="index in 5" 
        :key="'bottom-' + index" 
        :class="['lottery-cell', { 'active': currentIndex === (index + 8) }]"
      >
        {{ getPositionIndex(index + 8) }}
      </div>
      
      <!-- 左侧（从下到上） -->
      <div 
        v-for="index in 3" 
        :key="'left-' + index" 
        :class="['lottery-cell', { 'active': currentIndex === (index + 13) }]"
      >
        {{ getPositionIndex(index + 13) }}
      </div>
      
      <!-- 中间开始按钮 -->
      <div class="lottery-start" @click="!isRunning && startLottery()" :class="{ 'disabled': isRunning }">
        {{ isRunning ? '抽奖中...' : '开始' }}
      </div>
    </div>
    
    <!-- 中奖结果提示 -->
    <el-dialog
      v-model="dialogVisible"
      title="恭喜中奖"
      width="30%"
      center
    >
      <span>恭喜您抽中了 {{ prizes[result-1] }}！</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'LotteryGame',
  setup() {
    // 音频元素引用
    const bgMusic = ref(null)
    // 当前选中的格子索引
    const currentIndex = ref(0)
    // 是否正在抽奖
    const isRunning = ref(false)
    // 中奖结果
    const result = ref(0)
    // 对话框显示状态
    const dialogVisible = ref(false)
    
    // 奖品列表（女生喜欢的小东西）
    const prizes = [
      '口红', '香水', '项链', 'SU7', '手链', 
      '521￥', '洗袜子', '发饰', '手表', '香薰', 
      '护手霜', 'XIAOMI', '所有', '钱包', '手机壳', '再来一次'
    ]
    
    // 获取位置索引（按照顺时针排列）
    const getPositionIndex = (index) => {
      return prizes[index - 1] || index
    }
    
    // 开始抽奖
    const startLottery = () => {
      if (isRunning.value) return
      
      isRunning.value = true
      currentIndex.value = 1 // 从第一个格子开始
      
      // 播放背景音乐
      if (bgMusic.value) {
        bgMusic.value.currentTime = 0
        bgMusic.value.play().catch(err => {
          console.error('播放音乐失败:', err)
        })
      }
      
      // 随机生成最终停止的位置（1-16）
      const finalPosition = Math.floor(Math.random() * 16) + 1
      result.value = finalPosition
      
      // 计算需要转动的总次数 = 基础圈数(7圈) * 16格 + 最终位置
      const totalSteps = 7 * 16 + finalPosition
      
      // 初始速度和减速参数
      let speed = 50 // 初始速度，数值越小速度越快
      const initialSpeed = 50
      const finalSpeed = 300 // 最终速度，数值越大速度越慢
      
      let steps = 0
      let timer = null
      
      const run = () => {
        steps++
        
        // 计算当前位置
        currentIndex.value = steps % 16 === 0 ? 16 : steps % 16
        
        // 计算当前速度（逐渐减慢）
        // 前80%匀速，后20%减速
        if (steps > totalSteps * 0.8) {
          const remainSteps = totalSteps - steps
          const speedPercent = remainSteps / (totalSteps * 0.2)
          speed = initialSpeed + (finalSpeed - initialSpeed) * (1 - speedPercent)
        }
        
        // 判断是否结束
        if (steps >= totalSteps) {
          clearTimeout(timer)
          isRunning.value = false
          
          // 停止背景音乐
          if (bgMusic.value) {
            bgMusic.value.pause()
          }
          
          // 显示中奖结果
          setTimeout(() => {
            dialogVisible.value = true
          }, 500)
          
          return
        }
        
        // 继续下一步
        timer = setTimeout(run, speed)
      }
      
      // 开始运行
      timer = setTimeout(run, speed)
    }
    
    return {
      currentIndex,
      isRunning,
      result,
      dialogVisible,
      prizes,
      getPositionIndex,
      startLottery,
      bgMusic
    }
  }
}
</script>

<style scoped>
.lottery-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.lottery-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 80px);
  grid-template-rows: repeat(5, 80px);
  gap: 2px;
  width: 410px;
  height: 410px;
}

.lottery-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px;
  font-weight: bold;
  cursor: default;
  transition: all 0.3s ease;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.lottery-cell.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 第一行 */
.lottery-board > div:nth-child(-n+5) {
  grid-row: 1;
  grid-column: auto;
}

/* 右侧 */
.lottery-board > div:nth-child(n+6):nth-child(-n+8) {
  grid-column: 5;
}
.lottery-board > div:nth-child(6) { grid-row: 2; }
.lottery-board > div:nth-child(7) { grid-row: 3; }
.lottery-board > div:nth-child(8) { grid-row: 4; }

/* 底部（从右到左） */
.lottery-board > div:nth-child(n+9):nth-child(-n+13) {
  grid-row: 5;
}
.lottery-board > div:nth-child(9) { grid-column: 5; }
.lottery-board > div:nth-child(10) { grid-column: 4; }
.lottery-board > div:nth-child(11) { grid-column: 3; }
.lottery-board > div:nth-child(12) { grid-column: 2; }
.lottery-board > div:nth-child(13) { grid-column: 1; }

/* 左侧（从下到上） */
.lottery-board > div:nth-child(n+14):nth-child(-n+16) {
  grid-column: 1;
}
.lottery-board > div:nth-child(14) { grid-row: 4; }
.lottery-board > div:nth-child(15) { grid-row: 3; }
.lottery-board > div:nth-child(16) { grid-row: 2; }

/* 开始按钮 */
.lottery-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.lottery-start:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.lottery-start:active {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a419a 100%);
  transform: translate(-50%, -50%) scale(0.95);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.lottery-start.disabled {
  background: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
</style>